<template>
	<default-header-page-layout ref="page" title="移库作业" >
		<view class="page-frame with-action-user-row" :style="{height:pageBodyHeight+'px'}" v-if="pageBodyHeight">
			<action-user-row />
			<view class="with-action-user-row-page-content">
				<scan-input-form-item
					class="forma-item"
					label="托盘码"
					v-model="form.container"
					:msg="msg.container"
					@search="onSearchContainer"
					@clear="onClearContainer"
				/>
				
				<easy-select-form-item
					class="forma-item"
					label="目标库区"
					v-model="form.id"
					:msg="msg.id"
					:list="selectOptions.areas"
					value-field="id"
					label-field="areaName"
					:clearable="false"
				/>
				
				<easy-select-form-item
					v-if="form.id"
					class="forma-item"
					label="目标排"
					v-model="form.rowno"
					:msg="msg.rowno"
					:list="selectOptions.rows"
				/>
				
				<easy-select-form-item
					v-if="form.rowno"
					label="目标列"
					v-model="form.column"
					:msg="msg.column"
					:list="selectOptions.columns"
				/>
			</view>
			
			<easy-picker :visible.sync="modelVisible" :list="selectOptions.models" value-field="code" label-field="name" @select="onChangeModel"></easy-picker>
		</view>
		<template v-slot:footer>
			<view class="bottom-btns-row">
				<view class="btn-frame"><u-button text="重 置" @click="onReset"></u-button></view>
				<view class="divider"></view>
				<view class="btn-frame"><u-button type="primary" text="提 交" @click="onConfirm"></u-button></view>
			</view>
		</template>
	</default-header-page-layout>
</template>

<script>
import DefaultHeaderPageLayout from '@/components/DefaultHeaderPageLayout.vue'
import ActionUserRow from '@/components/ActionUserRow.vue'
import ScanInputFormItem from '@/components/ScanInputFormItem.vue'
import EasySelectFormItem from '@/components/EasySelectFormItem.vue'
import EasyPicker from '@/components/EasyPicker.vue'
import { $successInfo, getDicList } from '@/static/js/utils/index.js'
let initInterVal = null;
const defaultForm = {
	id:null,
	container:'',
	rowno:null,
	column:null
}
export default {
	name:'changeStorePage',
	components:{DefaultHeaderPageLayout,ActionUserRow,ScanInputFormItem,EasySelectFormItem,EasyPicker},
	data(){
		return {
			pageBodyHeight:0,
			form:{...defaultForm},
			msg:{
				id:'',
				container:'',
				rowno:'',
				column:''
			},
			checkContainer:'',
			placeCode:'',
			selectOptions:{
				areas:[],
				rows:[],
				columns:[],
				models:[]
			},
			modelVisible:false
		}
	},
	watch:{
		'form.id'(newVal,oldVal) {
			if (newVal!==oldVal) {
				this.watchArea()
			}
		},
		'form.rowno'(newVal,oldVal) {
			if (newVal!==oldVal) {
				this.watchRow()
			}
		},
		'form.column'(newVal,oldVal) {
			if (newVal!==oldVal) {
				this.watchColumn()
			}
		}
	},
	methods:{
		onSearchContainer(){
			if (!this.form.container) {
			  this.msg.container = '请输入托盘码！';
			  return false;
			}
			this.msg.container = '';
			this.getContainerInfo()
		},
		onClearContainer(){
			this.clearFullContainer()
		},
		clearFullContainer(){
			this.clearContainer()
			this.clearBackContainer()
		},
		clearContainer(){
			this.form.container = ''
			this.msg.container = ''
		},
		clearBackContainer(){
			this.checkContainer = ''
			this.placeCode = ''
		},
		clearFullRow(){
			this.selectOptions.rows = []
			this.clearRow()
		},
		clearRow(){
			this.form.rowno = ''
			this.msg.rowno = ''
		},
		clearFullCol(){
			this.selectOptions.columns = []
			this.clearCol()
		},
		clearCol(){
			this.form.column = ''
			this.msg.column = ''
		},
		getContainerInfo(){
			let params = {ContainerCode :this.form.container}
			this.$api.get('ContainerInformation',params,{block:'changeStore',warn:false}).then((d)=>{
				this.checkContainer = d.containerCode
				this.placeCode = d.placeCode
			}).catch(_errmsg=>{
				this.clearBackContainer()
				this.msg.container = _errmsg;
			})
		},
		getAreaSelectOptions(){
			this.$api.get('GetArea',{},{block:'changeStore'}).then((d)=>{
				this.selectOptions.areas = d || []
			}).catch(_errmsg=>{
				console.log(_errmsg)
			})
		},
		getRowsByArea(){
			let params = {Areaid:this.form.id}
			this.$api.get('GetPalceRowno',params,{block:'changeStore'}).then((d)=>{
				this.selectOptions.rows = d || []
				this.form.rowno = ''
			}).catch(_errmsg=>{
				this.clearFullRow()
				console.log(_errmsg)
			})
		},
		getColumnsByAreaAndRow(){
			let params = {Areaid:this.form.id,Rowno:this.form.rowno}
			this.$api.get('GetPalceColumn',params,{block:'changeStore'}).then((d)=>{
				this.selectOptions.columns = d || []
				this.form.column = ''
			}).catch(_errmsg=>{
				this.clearFullCol()
				console.log(_errmsg)
			})
		},
		watchArea(){
			this.msg.id = ''
			this.getRowsByArea()
		},
		watchRow(){
			this.msg.rowno = ''
			if (this.form.rowno) {
				this.getColumnsByAreaAndRow()
			} else {
				this.clearFullCol()
			}
		},
		watchColumn(){
			this.msg.column = ''
		},
		getSubmitParams(){
			return {
				containerCode:this.checkContainer,
				placeCode:this.placeCode,
				id:this.form.id,
				rowno:this.form.rowno,
				column:this.form.column
			}
		},
		checkBeforeSubmit(){
			let res = {flag:true,data:{}}
			res.data = this.getSubmitParams()
			if (!res.data.containerCode) {
				this.msg.container = '请先录入托盘信息！'
				res.flag = false
			} else {
				if (res.data.containerCode.toUpperCase()!==this.form.container.toUpperCase()) {
					this.msg.container = '录入托盘码与验证托盘码不匹配！'
					res.flag = false
				} else {
					this.msg.container = ''
				}
			}
			if (res.flag && !res.data.id) {
				this.msg.id = '请选择目标库区！'
				res.flag = false
			} 
			if (res.flag && !res.data.rowno) {
				this.msg.rowno = '请选择目标排！'
				res.flag = false
			}
			if (res.flag && !res.data.column) {
				this.msg.column = '请选择目标列！'
				res.flag = false
			} 
			return res;
		},
		onChangeModel(val){
			this.dealSubmit(val)
		},
		onReset(){
			this.reset()
		},
		onConfirm(){
			this.modelVisible = true
		},
		reset(){
			this.clearFullContainer()
			this.msg.id = ''
			this.clearFullRow()
		},
		dealSubmit(val){
			let check = this.checkBeforeSubmit()
			if (!check.flag) return false;
			let params = check.data
			params.assembleTask = val
			this.confirmAjax(params,(f)=>{
				if (f) {
					$successInfo('提交成功')
					this.reset()
				}
			})
		},
		confirmAjax(params,callback){
			this.$api.post('SubmitRelocationPda',params,{block:'changeStore'}).then(()=>{
				callback && callback(true)
			}).catch(()=>{
				callback && callback(false)
			})
		},
		/* 页面初始化获取页面body高度的定时器 */
		startInitInterval(callback){
			initInterVal = setInterval(()=>{
				if (this.pageBodyHeight) {
					this.clearInitInterval()
					callback && callback()
				} else {
					this.pageBodyHeight = this.$refs.page.getBodyHeight()
				}
			},200)
		},
		/* 清除定时器 */
		clearInitInterval(){
			try{
				clearInterval(initInterVal)
				initInterVal = null
			}catch(e){
				//TODO handle the exception
			}
		}
	},
	onReady(){
		this.startInitInterval(()=>{
			/* 页面初始化后需要执行的代码在这边调用 */
			this.getAreaSelectOptions()
			this.selectOptions.models = getDicList(this.$store,'assemble_taskmodel')
		})
	},
	onUnload(){
		this.clearInitInterval()
	}
}
</script>

<style scoped lang="scss">
.forma-item{
	margin-bottom: 24rpx;
}
.bottom-btns-row{
	display: flex;
	padding: 10rpx 20rpx;
	background-color: #fff;
	.btn-frame{
		width: 1%;
		box-sizing: border-box;
		flex-grow: 1;
	}
	.divider{
		width: 20rpx;
		flex-shrink: 0;
	}
}
</style>